<template>
  <div>
    <!-- 折叠面板组件 -->
    <Collapse simple class="send-news" @on-change="changeIcon">
      <Panel name="1" hide-arrow>
        <Row type="flex" align="middle">
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col span="15">传播分析</Col>
              <Col span="1" style="font-size:25px;">
                <Icon
                  type="md-arrow-dropdown"
                  :class="[rotate?  'el-icon-arrow-left go' : ' el-icon-arrow-left aa' ]"
                />
              </Col>
            </Row>
          </Col>
        </Row>
        <!-- 新闻筛选展开项目 -->
        <div slot="content">1111</div>
      </Panel>
    </Collapse>
    <Card class="pa_card">
      <div style="min-height: 350px">
        <Row>
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>事件描述</Col>
            </Row>
          </Col>
        </Row>
      </div>
    </Card>
    <Card class="pa_card">
      <div style="min-height: 600px">
        <Row>
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>风险指数</Col>
            </Row>
          </Col>
        </Row>
        <Row type="flex" justify="space-around">
          <Col span="10">
            <div id="mountNode" style="height:300px;"></div>
          </Col>
          <Col span="10">111</Col>
        </Row>
      </div>
    </Card>
    <Card class="pa_card">
      <div style="min-height: 600px">
        <Row>
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>人员关系分析</Col>
            </Row>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
//引入antv G6
import G6 from "@antv/g6";

export default {
  data() {
    return {
      rotate: false, //控制折叠面板图标旋转
      initData: {
        // 点集
        nodes: [
          {
            id: "node1", // 节点的唯一标识
            x: 100, // 节点横坐标
            y: 200, // 节点纵坐标
            label: "起始点" // 节点文本
          },
          {
            id: "node2",
            x: 300,
            y: 200,
            label: "目标点"
          }
        ],
        // 边集
        edges: [
          // 表示一条从 node1 节点连接到 node2 节点的边
          {
            source: "node1", // 起始点 id
            target: "node2", // 目标点 id
            label: "我是连线" // 边的文本
          }
        ]
      }
    };
  },
  methods: {
    //改变折叠面板的图标https://www.cnblogs.com/IwishIcould/p/11823397.html
    changeIcon() {
      this.rotate = !this.rotate;
    },
    maintest(graph) {
      const main = async () => {
        const response = await fetch(
          "https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json"
        );
        const remoteData = await response.json();
        const nodes = remoteData.nodes;
        nodes.forEach(node => {
          console.log(node)
          if (!node.style) {
            node.style = {};
          }
          switch (
            node.class // 根据节点数据中的 class 属性配置图形
          ) {
            case "c0": {
              node.type = "circle"; // class = 'c0' 时节点图形为 circle
              break;
            }
            case "c1": {
              node.type = "rect"; // class = 'c1' 时节点图形为 rect
              node.size = [35, 20]; // class = 'c1' 时节点大小
              break;
            }
            case "c2": {
              node.type = "ellipse"; // class = 'c2' 时节点图形为 ellipse
              node.size = [35, 20]; // class = 'c2' 时节点大小
              break;
            }
          }
        });

        graph.data(remoteData); // 加载数据
        graph.render(); // 渲染
      };
      main();
    }
  },
  mounted() {
    const graph = new G6.Graph({
      container: "mountNode", // 指定挂载容器
      width: 600, // 图的宽度
      height: 600, // 图的高度
      fitView: true, //设置是否将图适配到画布中；
      fitViewPadding: [10, 10, 10, 10], //画布上四周的留白宽度。
      animate: true, //是否启用图的动画
      // 节点在默认状态下的样式配置（style）和其他配置
      defaultNode: {
        size: 30, // 节点大小
        // ...                 // 节点的其他配置
        // 节点样式配置
        style: {
          fill: "steelblue", // 节点填充色
          stroke: "#666", // 节点描边色
          lineWidth: 1 // 节点描边粗细
        },
        // 节点上的标签文本配置
        labelCfg: {
          // 节点上的标签文本样式配置
          style: {
            fill: "#fff" // 节点标签文字颜色
          }
        }
      },
      // 边在默认状态下的样式配置（style）和其他配置
      defaultEdge: {
        // ...                 // 边的其他配置
        // 边样式配置
        style: {
          opacity: 0.6, // 边透明度
          stroke: "grey" // 边描边颜色
        },
        // 边上的标签文本配置
        labelCfg: {
          autoRotate: true // 边上的标签文本根据边的方向旋转
        }
      }
    });
    this.maintest(graph);
  }
};
</script>

<style scoped>
.send-news {
  margin-bottom: 10px;
}
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
/* 卡片样式 */
.pa_card {
  margin-bottom: 1vh;
}
</style>
